<template>
  <div class="pagination">
    <button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">Previous</button>
    <span>Page {{ currentPage }} of {{ totalPages }}</span>
    <input
        type="number"
        v-model.number="jumpPage"
        @keyup.enter="jumpToPage"
        min="1"
        :max="totalPages"
        placeholder="Jump to page"
        class="page-input"
    />
    <button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">Next</button>
  </div>
</template>

<script>
export default {
  props: {
    currentPage: {
      type: Number,
      required: true,
    },
    total: {
      type: Number,
      required: true,
    },
    pageSize: {
      type: Number,
      required: true,
    },
  },
  data() {
    return {
      jumpPage: null,
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.total / this.pageSize);
    },
  },
  methods: {
    changePage(page) {
      if (page < 1 || page > this.totalPages) return;
      this.$emit('update:currentPage', page);
    },
    jumpToPage() {
      if (this.jumpPage && this.jumpPage >= 1 && this.jumpPage <= this.totalPages) {
        this.changePage(this.jumpPage);
        this.jumpPage = null; // 清空输入框
      }
    },
  },
};
</script>

<style scoped>
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination button {
  margin: 0 5px;
}

.page-input {
  width: 60px;
  margin-left: 10px;
  text-align: center;
}
</style>
